<template>
	<view class="good_search">
		<!-- 顶部背景图 -->
		<view class="good_search_bg"></view>
		<view class="good_search_body">
			<u-search placeholder="输入商品名称搜索" v-model="goodsName" :clearabled="true" :show-action="false" height="32"
				@change="handleSearchChange" @clear="handleSearchChange" :focus="isFocus"></u-search>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="onRefresh" :refresher-threshold="50"
				@scrolltolower="scrolltolower" class="good_search_scroll_view">
				<template v-if="dataSouse.length > 0">
					<u-grid col="2">
						<u-grid-item v-for="(item, i) in dataSouse" :key="i+30">
							<goodsCard :item="item"></goodsCard>
						</u-grid-item>
					</u-grid>
					<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
				</template>
				<u-empty v-else marginTop="100" text="暂无商品" icon="http://qianxueapplet.suoeryun.com/zwsp.png"></u-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, unref, reactive, onMounted, onUnmounted } from 'vue';
	import goodsCard from '@/components/goodsCard';
	import { xcxList } from '@/config/goodStuff.api';
	import { onLoad } from '@dcloudio/uni-app';

	const goodsName = ref('');
	const dataSouse = ref([]);
	const triggered = ref(false);
	const scrollTop = ref(0);
	const status = ref('loadmore');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });
	const goodsCategoryId = ref('');
	const isFocus = ref(false);

	onLoad((params) => {
		if (!uni.$u.test.isEmpty(params)) {
			uni.setNavigationBarTitle({
				title: params?.title ?? ''
			});
			goodsCategoryId.value = params?.goodsCategoryId ?? '';
			pagination.pageNo = 1
			loadData();
			isFocus.value = false;
		} else {
			isFocus.value = true;
		}
	});
	onMounted(() => { });

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await xcxList({ ...pagination, goodsName: unref(goodsName), goodsCategoryId: unref(goodsCategoryId) });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 搜索监听
	 */
	function handleSearchChange(value) {
		pagination.pageNo = 1
		goodsName.value = value ?? '';
		uni.$u.throttle(loadData, 1000, false);
	}


	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}
</script>

<style lang="scss" scoped>
	.good_search {
		background-color: #fff;

		.good_search_bg {
			height: 24rpx;
			background-color: #FF943C;
		}

		.good_search_body {
			position: relative;
			top: -24rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 36rpx 24rpx 0 24rpx;

			::v-deep .u-search {
				padding: 0 24rpx;
			}

			.good_search_scroll_view {
				height: calc(100vh - 32px - 40rpx - 24rpx - 26rpx);
				padding-top: 28rpx;
			}
		}
	}
</style>